<!-- 地图-天气+时间 -->
<template>
  <div :class="'content-weather ' +($Ctl.isCs(true)?'cs-bg':'')">
    <div class="clearfix">
      <div class="weather-icon"></div>
      <div class="time-date">
        <p class="time">{{ timeStr }}</p>
        <p class="date">
          {{ dateStr }}
          <span class="week">{{weekDay}}</span>
        </p>
      </div>
    </div>
    <Iframer v-if="is_kshqxf"></Iframer>
  </div>
</template>
<script>
import { getWeather } from '@/api/baiduapi'
import Iframer from './Iframer'

export default {
  components: { Iframer },
  data() {
    return {
      timeStr: '',
      dateStr: '',
      weekDay: '',
      lastHour: '',
      address: JSON.parse(localStorage.getItem('ilinkBs_mapLocation') || '0'),
      week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      is_kshqxf: false,
    }
  },
  created() {
    //时间刷新
    let timerID = setInterval(this.updateTime, 1000)
    this.is_kshqxf = typeof KSHQ_IFRAME_URL != 'undefined'
  },
  methods: {
    //时间
    updateTime() {
      let that = this
      let cd = new Date()
      if (that.lastHour !== cd.getHours()) {
        that.getData(that.address)
        that.lastHour = cd.getHours()
      }
      that.timeStr =
        that.zeroPadding(cd.getHours(), 2) +
        ':' +
        that.zeroPadding(cd.getMinutes(), 2) +
        ':' +
        that.zeroPadding(cd.getSeconds(), 2)
      that.dateStr =
        that.zeroPadding(cd.getFullYear(), 4) +
        '-' +
        that.zeroPadding(cd.getMonth() + 1, 2) +
        '-' +
        that.zeroPadding(cd.getDate(), 2)
      that.weekDay = that.week[cd.getDay()]
    },
    zeroPadding(num, digit) {
      var zero = ''
      for (var i = 0; i < digit; i++) {
        zero += '0'
      }
      return (zero + num).slice(-digit)
    },
    //天气
    getData(centerPoint) {
      getWeather(centerPoint, (res) => {
        let data = res.result.now
        let weather = data.text
        if (weather == '霾') {
          weather = '雾'
        }
        //白天
        let weatherBox_day = {
          多云转晴: '-100px 0',
          晴: '0 0',
          多云: '-100px  0',
          阵雨: '-200px 0',
          阵雪: '-300px 0',
          阴: '-400px 0',
          雷阵雨: '-500px 0',
          雷阵雨伴有冰雹: '-600px 0',
          小雨: '0 -100px',
          中雨: '-100px  -100px',
          大雨: '-200px -100px',
          暴雨: '-300px -100px',
          雨夹雪: '-400px -100px',
          小雪: '-500px -100px',
          中雪: '-600px -100px',
          大雪: '-400px -200px',
          暴雪: '-500px -200px',
          冻雨: '-600px -200px',
          扬沙: '-300px -300px',
          沙尘暴: '-400px -300px',
          雾: '-500px -300px',
          无数据: '-600px -300px',
        }
        //晚上
        let weatherBox_night = {
          阴: '-400px 0',
          雷阵雨: '-500px 0',
          雷阵雨伴有冰雹: '-600px 0',
          小雨: '0 -100px',
          中雨: '-100px  -100px',
          大雨: '-200px -100px',
          暴雨: '-300px -100px',
          雨夹雪: '-400px -100px',
          小雪: '-500px -100px',
          中雪: '-600px -100px',
          大雪: '-400px -200px',
          暴雪: '-500px -200px',
          冻雨: '-600px -200px',
          晴: '0 -200px',
          多云: '-100px  -200px',
          阵雨: '-200px -200px',
          阵雪: '-300px -200px',
          扬沙: '0 -300px',
          沙尘暴: '-100px  -300px',
          雾: '-200px -300px',
          无数据: '-600px -300px',
        }
        let position = '0 0'
        let hour = new Date().getHours()
        if (5 < hour && hour < 18) {
          //白天
          $.each(weatherBox_day, function (key, val) {
            if (weather.indexOf(key) > -1) {
              position = val
            }
          })
        } else {
          //晚上
          $.each(weatherBox_night, function (key, val) {
            if (weather.indexOf(key) > -1) {
              position = val
            }
          })
        }
        $('.weather-icon').css('background-position', position)
      })
    },
  },
  mounted() {},
}
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.content-weather {
  width: 240px;
  color: #fff;
  &.cs-bg {
    background-color: rgba(0, 0, 0, 1);
  }
}
.weather-icon {
  float: left;
  width: 100px;
  height: 100px;
  margin-top: -20px;
  background-image: url(../../assets/images/markList/weather.png);
}
.time-date {
  float: left;
  color: #fff;
  .time {
    font-size: 30px;
    font-family: Mont-SemiBold;
    font-weight: 600;
  }
  .date {
    line-height: 24px;
    font-size: 15px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
  }
  .week {
    padding-left: 12px;
  }
}
</style>